<template>
   <div class="card rdsp-card-view" data-page="equpmentRank">
    <div class="card-content rank-content card-content-padding">
      <div  class="trouble-title card-header ">设备警情排名
        <div class="myblock">
          <form id="equpment-date-type">
            <select name="dateType"  style="font-size:10px;padding:2px; border: 1px solid;  color:#1b9cd6;" class="date-type trouble-date-type"  @change="getEqupmentRank">
                <option value="2">最近一年</option>
                <option value="1" selected>最近一个月</option>
                <option value="0">最近24小时</option>
            </select>  
          </form> 
        </div>
      </div> 
      <div class="card-content card-content-padding">
       <div class="list" >
        <ul id="equpmentRankContent1">

        </ul>
      </div>
    </div> 
  </div>
  <!--更多按钮-->
  <a href="/equipmentSafetyRank//1/"  id="equpmentRank-more-btn" class="morelist"  data-view=".view-main">
    <i class="iconfont app-icon-down icon-xiala"></i>
  </a>
  <!--建筑消防安全隐患排名模块-->
</div>
</template>
<style scoped>
.md .list .item-inner:last-child:after {
  width: 0px;
}
.trouble-li-content{
  position: relative;
}
.rank-content{
  padding-bottom: 0px;
}
.trouble-title{
  padding-left: 0;
  padding-right: 0px; 
  font-size: 14px;
}
.trouble-pic{
  width: 34px;
  height: 34px;
  position: relative;
  text-align: center;
}
.trouble-pic1{
  display:block;
  background-image:url(./img/home/redCircle.png);
  background-repeat: no-repeat;
  background-position:center;
}
.trouble-pic2{
  display:block;
  background-image:url(./img/home/yellowCircle.png);
  background-repeat: no-repeat;
  background-position:center;
}
.trouble-pic3{
  display:block;
  background-image:url(./img/home/blueCircle.png);
  background-repeat: no-repeat;
  background-position:center;
}
.trouble-pic4{
  display:block;
  background-image:url(./img/home/greenCircle.png);
  background-repeat: no-repeat;
  background-position:center;
}
.trouble-rank-no{
  position: absolute;
  bottom: 14px;
  width: 100%;
  text-align: center;
  color: white;
  font-size: 10px;
  right: 0px;
}
.company-name{
  text-align: left;
  height: 20px;
  width: 200px;
  position: relative;
  right: -42px;
  bottom: 10px;
  font-size: 14px;
  color: #333;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.company-address{
  text-align: left;
  height: 20px;
  width: 165px;
  position: relative;
  left: 42px;
  bottom: 10px;
  font-size: 12px;
  color: #999999;
  overflow: hidden; 
  text-overflow: ellipsis; 
  white-space: nowrap;
}
.company-trouble-alarms{
  height: 20px;
  width: 120px;
  /*padding-right: 30px;*/
  text-align: right;
  position: absolute;
  right: -3px;
  bottom: 30px;
  font-size: 25px;
  color:#f5687b;
  font-weight: bold;
}
.company-alarms-unit{
  padding-left: 2px;
  font-size: 14px;
  color:#f5687b;
  font-weight: normal;
}
#equpmentRankContent1 .item-inner:last-child:after{
  width:0px;
}
#equpmentRankContent1:before, #equpmentRankContent1:after {
  height: 0px !important;
  width: 0px !important;
}

.md .list ul:before {
  height: 0px !important;
  width: 0px !important;
}

.md .list ul:after {
  height: 0px !important;
  width: 0px !important;
}
</style>
<script>
  return {
    mounted() {
           var self = this;
           self.getEqupmentRank();//获取排名
         },
         data: function () {
          return {
            id: this.$route.params.id,
          }
        },
        // Component Methods
        methods: {
          getEqupmentRank: function () {
              var $ = this.$;
              var app = this.$app;
              var router = this.$router;
              var formData = app.form.convertToData('#equpment-date-type');
              var dateType=jQuery.trim(formData.dateType);
              $("#equpmentRank-more-btn").attr("href","/equipmentSafetyRank/"+dateType+"/")
              var id_org="";
              $("#equpmentRankContent1").empty();
              if (single_Orgid == "") {
                id_org=userInfor.organizationIds;
              }else {
                id_org=single_Orgid;
              }
              Dao.troubleRank({
                  userName:userInfor.accountName,
                  deviceId:appKeyObj.deviceId,
                  orgIds:id_org,
                  orgType:0,
                  time:dateType
              }, function (data) {
                  if(data && data.length>0){
                    for (var i = 0; i < data.length; i++) {
                      var no =i+1;
                      if(no==1){
                        $("#equpmentRankContent1").append('<li class="item-inner trouble-li-content">'
                                +'<div class="item-content trouble-pic trouble-pic1">'
                                 + '<div class="item-media"><span class="trouble-rank-no">No.1</span></div>'
                                  +'<div class=""><div class="company-name">'+data[i].fcfName
                                  +'</div><div class="company-address">'+data[i].fcfLocation
                                +'</div></div></div><div class="company-trouble-alarms">'+data[i].num
                                +'<span class="company-alarms-unit">次</span></div></li>');                
                      }else if(no==2){
                         $("#equpmentRankContent1").append('<li class="item-inner trouble-li-content">'
                                +'<div class="item-content trouble-pic trouble-pic2">'
                                 + '<div class="item-media"><span class="trouble-rank-no">No.2</span></div>'
                                  +'<div class=""><div class="company-name">'+data[i].fcfName
                                  +'</div><div class="company-address">'+data[i].fcfLocation
                                +'</div></div></div><div class="company-trouble-alarms">'+data[i].num
                                +'<span class="company-alarms-unit">次</span></div></li>'); 
                      }else if(no==3){
                        $("#equpmentRankContent1").append('<li class="item-inner trouble-li-content">'
                                +'<div class="item-content trouble-pic trouble-pic3">'
                                 + '<div class="item-media"><span class="trouble-rank-no">No.3</span></div>'
                                  +'<div class=""><div class="company-name">'+data[i].fcfName
                                  +'</div><div class="company-address">'+data[i].fcfLocation
                                +'</div></div></div><div class="company-trouble-alarms">'+data[i].num
                                +'<span class="company-alarms-unit">次</span></div></li>'); 
                      }else{  
                        $("#equpmentRankContent1").append('<li class="item-inner trouble-li-content">'
                                +'<div class="item-content trouble-pic trouble-pic4">'
                                 + '<div class="item-media"><span class="trouble-rank-no">'+no+'</span></div>'
                                  +'<div class=""><div class="company-name">'+data[i].fcfName
                                  +'</div><div class="company-address">'+data[i].fcfLocation
                                +'</div></div></div><div class="company-trouble-alarms">'+data[i].num
                                +'<span class="company-alarms-unit">次</span></div></li>'); 
                      }
                      if(no==4){
                        break;
                      }
                    }
                  }else{
                    $("#equpmentRankContent1").append(`<div class="no-data" style="margin: 10px 0;">暂无相关数据</div>`);
                  }  
              },true);
            }
          },
        }
       </script>
       
